<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie==edge">
    <title>index</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<!--头部模块-->
<div class="header">
<div class="header-icon">
    <div class="icon">
        <img src="./img/icon-white.png" alt="">
    </div>
</div>
    <div class="header-select">

        <span class="menu">
            <i class="fa fa-reorder" ></i>
        </span>
        <span class="thumbs">
        <i class="fa fa-hand-o-right"></i>
        </span>
    </div>

</div>
<div class="bd" id="info">
<div class="title">
<div class="user-portrait">
    <img :src="user.url" alt="">
</div>

    <div class="info">
        <span class="edit">
            编辑资料
        </span>
        <span class="edit-percent">
            56%
        </span>
    </div>
    <div class="friend">
        <span class="plus">
            <i class="fa fa-plus"></i>
        </span>
        <span class="friend-text">
            朋友
        </span>
    </div>
</div>

      <div class="user-info">
        <p class="user-name">
            {{user.username}}
        </p>
          <p class="user-member">
              抖音号：
              <span>
                  {{user.user_member}}
              </span>
              <span>
                  <i class="fa fa-clone"></i>
              </span>

          </p>
          <div class="hr">

          </div>
          <div class="user-introduce">
              {{user.user_introduce}}
          </div>
          <div class="add_info">
              <span>
                  添加年龄。地区等标签
              </span>
          </div>
          <div class="user_achievement">
              <ul>
                  <li>
                      <span class="zan">
                       {{user.user_achievement.zan}}
                      </span>
                      <span class="type_text">
                          获赞
                      </span>
                  </li>
                  <li>
                      <span class="zan">
                            {{user.user_achievement.heart}}
                      </span>
                      <span class="type_text">
                          关注
                      </span>
                  </li>
                  <li>
                     <span class="zan">
                       {{user.user_achievement.Fans}}
                      </span>
                      <span class="type_text">
                          粉丝
                      </span>
                  </li>
              </ul>
          </div>
      </div>
    <div class="user_video">
        <div class="user_tag">
            <ul>
                <li @click="change(index)" :key="item.id" v-for="(item,index) in user.user_video" >
                    <span :class='user.current_index==index?"current":""'>
                        {{item.tag}}
                    </span>
                </li>

            </ul>
        </div>
        <div class="user_tag_video">
<!--           -->
            <ul>
                <li  :key="item.id" v-for="(item,index) in user.user_video[user.current_index].list">
                    <img :src='item.url' alt="">
                        <div class="after">
                            <i class="fa fa-heart-o"></i>
                            <span>{{item.zan}}</span>
                        </div>
                </li>

            </ul>
        </div>
    </div>
</div>
<div class="main_menu" id="menu_bar">
    <div class="bar">
        <ul>
            <li v-for="(item,index) in menu_list" :key="index">
        <span class="icon">
            <i :class="item.fa_class"></i>
        </span>
                <span class="icon_text">
            {{item.text}}
        </span>
            </li>
        </ul>
    </div>
<div class="more">

        <i class="fa fa-qrcode"></i>

    <span class="more_function">
        更多功能
    </span>
</div>
</div>
<div class="foot">
<div class="select">
    <ul>
        <li>
                    <span>
                    首页
                    </span>
        </li>
        <li>
                    <span>
                     朋友
                    </span>
        </li>
        <li>
                    <span class="plus">
                    <i class="fa fa-plus"></i>
                    </span>
        </li>
        <li>
                    <span>
                    消息
                    </span>
    </li>
        <li class="me">
                    <span >
                    我
                    </span>
    </li>

    </ul>
</div>
    <div class="footer">
        <div class="mid">
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload=function (){
        const menu=document.querySelector('.menu');
        const main_menu=document.querySelector('.main_menu');
        var flag=false;
        menu.addEventListener('click',function (){

            main_menu.style.cssText = "animation: move_menu .6s linear forwards;";
            flag=true;
        });
        document.body.addEventListener('touchstart',function (){
            if (flag){
                main_menu.style.cssText = "animation: leave_menu .6s linear forwards;"
                flag=false
            }
        })
    }
    let app=new Vue({
        el:'#info',
        data:{
            video_list:{

            },
            user:{
                id:0,
                url:'./img/user-portrait.png',
                username:'shq-splendid',
                user_member: '10382937832',
                user_introduce:'大家好，我是中科大研究生一枚。',
                user_achievement:{
                    zan:'28w',
                    heart:'8295',
                    Fans:'17w'
                },

                current_index:0,
                user_video:[
                    {
                        id: 0,
                        tag:'作品',
                        list:[
                            {
                            id:1,
                            url:'./upload/zuopin/1.jpg',
                            zan:'22w'
                            },
                            {
                                id:2,
                                url:'./upload/zuopin/2.jpg',
                                zan:'18w'
                            },
                            {
                                id:3,
                                url:'./upload/zuopin/3.jpg',
                                zan:'56w'
                            },
                            {
                                id:4,
                                url:'./upload/zuopin/4.jpg',
                                zan:'33w'
                            },
                            {
                                id:5,
                                url:'./upload/zuopin/5.jpg',
                                zan:'34w'
                            },
                        ]

                    },
                    {
                        id:1,
                        tag:'动态',
                        list:[
                            {
                                id:1,
                                url:'./upload/dongtai/1.jpg',
                                zan:'22w'
                            },
                            {
                                id:2,
                                url:'./upload/dongtai/2.jpg',
                                zan:'18w'
                            },
                            {
                                id:3,
                                url:'./upload/dongtai/3.jpg',
                                zan:'56w'
                            },
                            {
                                id:4,
                                url:'./upload/dongtai/4.jpg',
                                zan:'33w'
                            },
                            {
                                id:5,
                                url:'./upload/dongtai/5.jpg',
                                zan:'77w'
                            },
                        ]
                    },
                    {
                        id:2,
                        tag:'喜欢',
                        list:[
                            {
                                id:1,
                                url:'./upload/like/1.jpg',
                                zan:'22w'
                            },
                            {
                                id:2,
                                url:'./upload/like/2.jpg',
                                zan:'18w'
                            },
                            {
                                id:3,
                                url:'./upload/like/3.jpg',
                                zan:'56w'
                            },
                            {
                                id:4,
                                url:'./upload/like/4.jpg',
                                zan:'33w'
                            },
                            {
                                id:5,
                                url:'./upload/like/5.jpg',
                                zan:'77w'
                            },
                        ]
                    },
                    {
                        id:3,
                        tag:'相册',
                        list:[
                            {
                                id:1,
                                url:'./upload/photo/1.jpg',
                                zan:'77w'
                            },
                        ]
                    }
                ]
            }
        },
        methods:{
            change:function (index){
                this.user.current_index=index;

            },

        },
        // watch:{
        //     video_list:function (){
        //         return this.user.user_video.find(function (obj){
        //             return obj.id==this.user.current_index+1;
        //         })
        //     }
        // }
    });
    let menu=new Vue({
        el:'#menu_bar',
        data: {
            menu_list:[
                {
                    fa_class:'fa fa-shopping-cart',
                    text:'我的订单'
                },
                {
                    fa_class:'fa fa-money',
                    text:'钱包'
                },
                {
                    fa_class:'fa fa-dedent',
                    text:'功能'
                },
                {
                    fa_class:'fa fa-qrcode',
                    text:'我的二维码'
                },
                {
                    fa_class:'fa fa-star',
                    text:'我的收藏'
                },
                {
                    fa_class:'fa fa-file-photo-o',
                    text:'私密作品'
                },
                {
                    fa_class:'fa fa-line-chart',
                    text:'创作者服务中心'
                },
                {
                    fa_class:'fa fa-umbrella',
                    text:'未成年保护工具'
                },
                {
                    fa_class:'fa fa-cog',
                    text:'设置'
                },
            ]
        }
    })
</script>
</body>
</html>